<template>
  <div>
    <a-input-search :placeholder="$t('m.bpm.design.select_user_search_username_placeholder')" enter-button @search="searchUserByKey" />
    <a-table
      v-if="searchShow"
      class='searchResult'
      rowKey="userKey"
      size="small"
      bordered
      :pagination=false
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      :rowSelection="{selectedRowKeys: computedKeys, onChange: onSelectChange, type: (isRadio ? 'radio' : 'checkbox')}"
      @change="handleTableChange">
    </a-table>
  </div>
</template>

<script>
// 废弃的类

  import { YcListMixin } from '@/mixins/YcListMixin'
  import { getAction } from '@/api/manage'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'SearchList',
    mixins: [YcListMixin],
    props: {
      value: {
        type: Array,
        required: true
      },
      userDataSource: {
        type: Array,
        default: () => []
      },
      isRadio: {
        type: Boolean,
        default: false
      },
      searchShow:{
        type:Boolean,
        default:false
      },
      searchType:{
        type:String,
        default:''
      },
      searchCondition:{
        type:String,
        default:''
      },
      searchUsers:{
        type:Array,
        default:() => []
      }
    },
    data () {
      return {
        disableMixinCreated: true,
        dataSource: [],
        columns: [{
          title: this.$t('m.system.user.entity.realname'),
          align: 'center',
          width: 180,
          dataIndex: 'name'
        }, {
          title: this.$t('m.system.org.entity.depName'),
          align: 'center',
          width: 180,
          dataIndex: 'deptName'
        }],
        url:{
          searchUserByKey:YchConstant.PREFIX_BPM + '/bpm-front/displayRest/searchUserByKey/v1'
        }
      }
    },
    computed: {
      computedKeys () {
        return this.value.map(item => item.userKey)
      }
    },
    watch: {
      userDataSource: {
        handler (value) {
          this.dataSource = value
        },
        immediate: true
      }
    },
    methods: {
      onSelectChange (selectedRowKeys, selectedRows) {
        if (this.isRadio) {
          const data = [{
            id: selectedRows[0].id,
            name: selectedRows[0].name,
            deptId: selectedRows[0].deptId,
            deptName: selectedRows[0].deptName,
            userKey: selectedRows[0].userKey
          }]
          this.$emit('input', data)
        } else {
          const oldKeys = this.computedKeys
          const data = this.value.filter(item => selectedRowKeys.indexOf(item.userKey) != -1)//原来剩下的
          const addIds = selectedRowKeys.filter(id => oldKeys.indexOf(id) == -1)//新增的
          selectedRows.forEach(item => {
            if (addIds.indexOf(item.userKey) != -1) {
              data.push({
                id: item.id,
                name: item.name,
                deptId: item.deptId,
                deptName: item.deptName,
                userKey: item.userKey
              })
            }
          })
          this.$emit('input', data)
        }
      },
      loadData () {

      },
      searchUserByKey(searchKey){
        this.loading = true
        if(this.searchType == 'user'){
          if(this.searchUsers){
            this.dataSource =  this.searchUsers.filter(item=>item.name.indexOf(searchKey)>-1);
            setTimeout(()=>{
              this.$emit('setSearchShow',true);
            },500);
          }
          this.loading = false
        }else{
          getAction(this.url.searchUserByKey, {
            searchType: this.searchType,
            searchKey: searchKey,
            searchCondition:this.searchCondition
          }).then((res) => {
            if (res.success) {
              this.dataSource = res.result;
              //this.searchShow = true;
              this.$emit('setSearchShow',true);
            } else {
              this.messageUtil.warning(res.message)
            }
          }).finally(() => {
            this.loading = false
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .searchResult{
    /*width: 540px;*/
    font-size: 12px;
    line-height: 1.5;
    border-radius: 2px;
    position: absolute;
    z-index : 30;
    margin-top: 3px;
    background-color: #ffffff;
    /*display : none;*/
    /*max-height:300px;
    min-height:2px;*/
    overflow:auto;
  }
</style>
